<template>
  <div class="dashboard" v-if="mode === 'horizontal'">
    <div style="width: 90%; margin: auto">
      <div style="height: 50px"></div>
      <!-- <div>
        <div class="dataTitle">数据平台</div>
        <div class="dataTitle">掌控数据、轻盈如云，助力企业数字化转型！</div>
        <div class="dataLitleTitle">欢迎登录，请选择您要进入的模块～</div>
      </div> -->

      <div id="dataModuleBox">
        <div class="dataModule" v-for="(menu,index) in routes" :key="index" @click.stop="handleClick(menu)">
          <div class="dataModuleImgBox">
            <!-- <img src="@/assets/index/systemMonitor.svg" alt="" /> -->
             <component
              class="menu-icon"
              v-if="menu.meta.icon"
              theme="outline"
              size="50"
              strokeWidth="3"
              fill="#182be0"
              :is="menu.meta.icon"
            />
          </div>
          <div class="dataModuleTitle">{{menu.meta.title}}</div>
          <div class="dataModuleDescription max-line2">......描述</div>
        </div>
        <div class="dataModule NotOpened">
          <div class="tips">未开通</div>
          <div class="dataModuleImgBox">
            <img src="@/assets/index/otherModules.svg" alt="" />
          </div>
          <div class="dataModuleTitle">其他模块</div>
          <div class="dataModuleDescription max-line2">其他模块描述</div>
        </div>
        <div class="dataModule NotOpened">
          <div class="tips">未开通</div>
          <div class="dataModuleImgBox">
            <img src="@/assets/index/otherModules.svg" alt="" />
          </div>
          <div class="dataModuleTitle">其他模块</div>
          <div class="dataModuleDescription max-line2">其他模块描述</div>
        </div>
        <div class="dataModule NotOpened">
          <div class="tips">未开通</div>
          <div class="dataModuleImgBox">
            <img src="@/assets/index/otherModules.svg" alt="" />
          </div>
          <div class="dataModuleTitle">其他模块</div>
          <div class="dataModuleDescription max-line2">其他模块描述</div>
        </div>
        <div class="dataModule NotOpened">
          <div class="tips">未开通</div>
          <div class="dataModuleImgBox">
            <img src="@/assets/index/otherModules.svg" alt="" />
          </div>
          <div class="dataModuleTitle">其他模块</div>
          <div class="dataModuleDescription max-line2">其他模块描述</div>
        </div>
        <div class="dataModule NotOpened">
          <div class="tips">未开通</div>
          <div class="dataModuleImgBox">
            <img src="@/assets/index/otherModules.svg" alt="" />
          </div>
          <div class="dataModuleTitle">其他模块</div>
          <div class="dataModuleDescription max-line2">其他模块描述</div>
        </div>
      </div>
      <div style="height: 50px"></div>
    </div>
  </div>
  <Index1 v-else></Index1>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';
import Index1 from './index1.vue';
const router = useRouter()
const store = useStore();
const mode = computed(() => {
    return store.getters['setting/mode'];
  });
const routes = computed(() => {
    return store.getters['routes/apiRoutes'];
  });
function handleClick(value) {
  store.commit('routes/api2Routes', value.children===undefined?[]:value.children)
  router.push({ name: value.children===undefined?value.name:value.children[0].name });
}


</script>

<style lang="scss" scoped>
.dashboard {
  position: relative;
  // height: calc(100vh - 64px);
  width: 100%;
  // overflow: auto;
  background-color: #f5f6f9;
  background-image: url('/static/imgs/dashboard-bg.jpg');
  background-size: 100% auto;
  background-repeat: no-repeat;
}

#dataModuleBox {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;

  .dataModule {
    padding: 24px;
    min-width: 240px;
    height: 200px;
    background: #ffffff;
    border-radius: 4px 4px 4px 4px;
    opacity: 1;
    cursor: pointer;
    position: relative;

    .tips {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 56px;
      height: 21px;
      border-radius: 11px 11px 11px 11px;
      opacity: 1;
      border: 1px solid #3246d2;
      font-size: 12px;
      font-weight: 400;
      color: #3246d2;
      line-height: 21px;
      text-align: center;
    }
  }

  .NotOpened {
    opacity: 0.5;
  }

  .dataModule:hover {
    box-shadow: 0px 2px 16px 1px rgba(50, 70, 210, 0.2);
  }

  .NotOpened:hover {
    box-shadow: 0px 0px 0px 0px;
  }

  .dataModuleImgBox {
    width: 64px;
    height: 64px;
  }

  .dataModuleTitle {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 600;
    color: #000000;
  }

  .dataModuleDescription {
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    line-height: 20px;
  }
}

.dataTitle {
  font-size: 32px;
  font-weight: 600;
  color: #000000;
  line-height: 54px;
}

.dataLitleTitle {
  font-size: 16px;
  font-weight: 400;
  color: #666666;
  line-height: 0px;
  margin: 16px 0 32px 0;
}
</style>
